【Day05】一鍵輸入主題色即可切換Theme - CSS Variables + color-contrast()

15th鐵人賽

卡羅奇奇

2023-09-20 23:26:16

253 瀏覽

分享至

CSS Variables + color-contrast()

CSS Variables支援度:Can I Use
color-contrast()支援度:Can I Use

既然前兩天都可以用CSS Variables簡潔的製作出Dark Mode/Light Mode了，

這時可能有87%會收到PM的需求:
" 中秋節到了可以幫我做個中秋節Theme的活動頁嗎? "
" Layout都不用變，調個畫面的UI顏色就好，應該很快吧!? "
" ........ "

為了偷懶防患未然，我們可以就利用CSS Variables + CSS的新functioncolor-contrast()

color-contrast()是什麼?

color-contrast(color vs color-list)
color是要對比的color，結果會回傳從color list中找出與color對比度最高的顏色。ex:color-contrast(#394BA0 vs white,black),結果產出會是white
2020/09/20實測color-contrast()目前支援度只有Safari能看到效果，但相信這方便的功能，不久之後瀏覽器都會支援的~

以往為了調整不同主題的Theme,我們必須一一的設定背景顏色、文字顏色等等，如下:

.MoonFestival{
    section{
        background:black;
        color:white;
    }
    button{
        background:yellow;
        color:black;
    }
}

以上我們可以發現，我們需要根據每個區塊或按鈕的背景色，調整文字顏色，讓文字色彩明顯的呈現，非常費工。
這時我們可以利用CSS Variables + color-contrast()，如下:

:root{
    --primary-bg:black;
    --primary-btn:yellow;
}
.MoonFestival{
    section{
        background:var(--primary-bg);
        color:color-contrast(var(--primary-bg) vs white,black);
    }
    button{
        background:var(--primary-btn);
        color:color-contrast(var(--primary-btn) vs white,black);
    }
}

這樣只要設定顏色變數，就可以完成整個主題Theme的色彩調整，是不是很方便呢~